:host {
  --ti-pathlist-item-padding-top: 5px;
  --ti-pathlist-item-padding-bottom: 5px;
  --ti-pathlist-close-width: 30px;
}

.ti3-pathList-item {
  color: var(--ti-common-color-text-primary);
  font-size: var(--ti-common-font-size-base);
  font-weight: var(--ti-common-font-weight-4);
  line-height: var(--ti-common-line-height-number);
  height: var(--ti-common-size-7x);
  padding: var(--ti-pathlist-item-padding-top) var(--ti-common-space-9x) var(--ti-pathlist-item-padding-bottom) var(--ti-common-space-5x);
  margin-bottom: var(--ti-common-space-base);
  background-color: var(--ti-common-color-bg-white-emphasize);
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  &:hover {
    .ti3-pathList-close {
      display: flex;
    }
  }
}

.ti3-pathList-index {
  width: var(--ti-common-size-4x);
  margin-right: var(--ti-common-space-3x);
  flex-shrink: 0;
}

.ti3-pathList-icon {
  display: inline-flex;
  margin-right: var(--ti-common-space-3x);
  font-size: var(--ti-common-font-size-2);
}

.ti3-pathList-close {
  display: none;
  width: var(--ti-pathlist-close-width);
  height: var(--ti-common-space-7x);
  position: absolute;
  right: 0;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover .ti3-pathList-closeIcon {
    color: var(--ti-common-color-bg-emphasize);
  }
}
